<!-- 左侧工具条主界面 -->
<template>
    <div class="left-tool">
        <template v-for="item in data.toolData">
            <div v-if="item.show" class="tool-item" :class="item.active?'active':''" @click="toolItemClick(item)">
                <dc-icon :icon="item.icon" className="tool-item-icon" />
                <span class="tool-item-name">{{ item.name }}</span>
            </div>
        </template>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { revoke } from '../../common/util/revoke.js';
import { globalOptions } from '../../pageManager.js'

const emit = defineEmits(['onClick'])

const data = reactive({
    toolData: [
        {
            type: 1,
            icon: "AppstoreOutlined",
            name: "组件",
            show: true,
            active: true,
        },
        {
            type: 2,
            icon: "CodeOutlined",
            name: "源码",
            show: globalOptions.sourceCodePanel,
            active: false,
        },
        {
            type: 3,
            icon: "ClusterOutlined",
            name: "大纲",
            show: globalOptions.outlinePanel,
            active: false,
        },
        {
            type: 4,
            icon: "SettingOutlined",
            name: "参数",
            show: globalOptions.paramsPanel,
            active: false,
        }
    ]
})

const created = () => {
    // console.log("globalOptions", globalOptions);
}

created();

/**
 * @method
 * @param {Object} item 工具栏对象
 * @desc 工具栏点击事件
 */
const toolItemClick = (item) => {
    data.toolData.forEach(item => {
        item.active = false;
    });
    item.active = true;

    revoke.addHistory(null, `点击左侧【${item.name}】面板`)

    emit("onClick", item);
}

</script>

<style lang="less" scoped>
.left-tool {
    height: 100%;
    width: 50px;
    border-right: 1px solid var(--borderColor);
    padding-top: 8px;

    .tool-item {
        width: 100%;
        height: auto;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: var(--defaultColor);
        margin-bottom: 8px;

        &:hover {
            background-color: #f6f6f6;
        }

        &.active {
            color: var(--activeColor);
            background-color: #3e8bf20f;
        }

        .tool-item-name {
            font-size: 13px;

            &::selection {
                background-color: transparent;
            }
        }
    }
}
</style>